<template>
  <div>
    测试
    <Son1 v-bind="$attrs" :str="str" />
    <Son2 />
    <!-- <Son3 /> -->
    <el-button>完整</el-button>
    <button @click="fn2">修改</button>
    <Son4 />
  </div>
</template>

<script>
import mixin from '@/utils/mixin'
import Son1 from './components/Son1.vue'
import Son2 from './components/Son2.vue'
// import Son3 from './components/Son3.vue'
import Son4 from './components/Son4.vue'
export default {
  mixins: [mixin],
  components: {
    Son1,
    Son2,
    Son4
    // Son3
  },
  data() {
    return {
      str: '数据1',
      str2: '数据2',
      str3: '数据3',
      name: 'home组件'
    }
  },
  provide: {
    uname: '父组件的值'
  },
  mounted() {
    this.fn()
    console.log(this.name, '打印mixin里面的属性')
  },
  created() {
    console.log('组件')
  },
  methods: {
    fn() {
      console.log('方法1')
    },
    fn2() {
      console.log('方法2')
      console.log(this.uname)
      this.uname = 'hahaha'
    }
  }
}
</script>

<style lang="less" scoped></style>
